<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		.a0{width: 13em;height:4em;overflow: hidden;position: relative;line-height: 4em;text-align: center;color: #fff;}
		.a1{width: 10em;height:4em;background: #669;position: absolute;top: 0;left: 0;}
		.a2{width: 4em;height: 4em;background: #669;-webkit-transform: rotate(45deg);position: absolute;top: 0;left: 8em;}
		.a3{width: 100px;height: 0px; border-bottom: 100px solid #0000FF;border-top: 100px solid #0000FF;border-left: 50px solid transparent;border-right: 10px solid #0000FF;}
		.a4{width: 100px;height: 100px; border-bottom: 100px solid #000;border-top: 100px solid #333;border-left: 100px solid #4CAE4C;border-right: 100px solid #C7254E;}
		.trapezoid { border-bottom: 100px solid #669; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }
        .bg{
        width:300px;
        height:50px;
        background:#caca8c;
        background-image:-webkit-gradient(linear,50% 0,0 100%,
        from(transparent),
        color-stop(.5,transparent),
        color-stop(.5,#d86707),
        to(#d86707)
        ),
        -webkit-gradient(linear,50% 0,100% 100%,
        from(transparent),
        color-stop(.5,transparent),
        color-stop(.5,#d86707),
        to(#d86707)
        );
        background-image:-moz-linear-gradient(50% 0 -45deg,
        transparent,
        transparent 50%,
        #d86707 50%,
        #d86707   
        ),-moz-linear-gradient(50% 0 -135deg,
        transparent,
        transparent 50%,
        #d86707 50%,
        #d86707
        );     
        /*这一段是把他分成很多个小三角形*/
        background-size:30px 15px;
        background-repeat:repeat-x;
        background-position:0 100%;                    
        }					
		</style>
	</head>
	<body>
        <div class="a4"></div>
        <div class="a0">
        <div class="a1">第一天</div>
        <div class="a2"></div>
        </div>
        <div class="a3"></div>
        <div class="bg"></div>
        <div class="trapezoid"></div>
	</body>
</html>
